<template>
  <el-tabs v-model="activeName" tab-position="left" @tab-click="handleChange">
    <el-tab-pane label="表单信息" name="form" label-width="100px">
      <FormIndex :form-key="instanceUrl" v-model="form" :viewer="true" />
    </el-tab-pane>
    <el-tab-pane label="任务处理" name="taskForm" label-width="100px">
      <el-card>
        <div slot="header">
          <span>任务信息</span>
        </div>
        <div>
          <el-row class="task-info-row">
            <el-col :span="8">任务名称：</el-col>
            <el-col :span="16">{{ taskInfo.taskName }}</el-col>
          </el-row>
          <el-row class="task-info-row">
            <el-col :span="8">流程发起人：</el-col>
            <el-col :span="16">{{ taskInfo.orderVariableMap ? taskInfo.orderVariableMap['operator.realName'] : '' }}</el-col>
          </el-row>
          <el-row class="task-info-row">
            <el-col :span="8">任务开始时间：</el-col>
            <el-col :span="16">{{ taskInfo.taskCreateTime }}</el-col>
          </el-row>
        </div>
      </el-card>
      <el-card style="margin-top: 12px;">
        <div slot="header">
          <span>意见信息</span>
        </div>
        <el-form label-position="left" :inline="false" class="m-form" ref="commonForm" :model="commonForm" label-width="88px">
          <el-form-item class="m-form-item" label="处理意见：" prop="approvalType">
            <el-select placeholder="常用审批语" v-model="commonForm.approvalType" @change="handleOptChange">
              <el-option label="同意" value="同意"></el-option>
              <el-option label="同意***的意见" value="同意***的意见"></el-option>
              <el-option label="请指示" value="请指示"></el-option>
              <el-option label="请***阅示" value="请***阅示"></el-option>
              <el-option label="请处理" value="请处理"></el-option>
              <el-option label="不同意" value="不同意"></el-option>
              <el-option label="呈领导阅示" value="呈领导阅示"></el-option>
              <el-option label="请审批" value="请审批"></el-option>
              <el-option label="审核无误" value="审核无误"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="0px" prop="approvalOpinion">
            <el-input type="textarea" v-model="commonForm.approvalOpinion" />
          </el-form-item>
        </el-form>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="流程图" name="diagram">
      <SnakerFlowDesigner class="m-snaker-flow-designer" :high-light="highLight" :viewer="true" v-model="flowData" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { getXml } from '@/api/wf/wf.process.service.js'
import { highLightData } from '@/api/wf/wf.order.service.js'
import { get as getTask, execute as executeTask, backOff } from '@/api/wf/wf.task.service.js'

import FormIndex from '@/views/modules/wf/form/index.vue'

export default {
  name: 'WfProcessDetails',
  components: {
    FormIndex
  },
  props: {
    id: {
      type: [String, Number, Object],
      default: undefined
    }
  },
  data() {
    return {
      xml: '',
      activeName: 'form',
      flowData: {},
      highLight: {},
      instanceUrl: 'leaveForm',
      form: {},
      taskInfo: {},
      commonForm: {
        approvalOpinion: ''
      }
    }
  },
  mounted() {
    this.instanceUrl = this.id.instanceUrl
    getTask({
      id: this.id.id
    }).then(res => {
      if (res.code === 0) {
        this.taskInfo = res.data
        Object.keys(res.data.orderVariableMap).filter(key => {
          return key.startsWith('f_')
        }).forEach(key => {
          this.$set(this.form, key, res.data.orderVariableMap[key])
        })
      }
    })
    getXml({
      id: this.id.processId
    }).then(res => {
      if (res.code === 0) {
        this.xml = res.data
        this.flowData = res.data
        highLightData({ id: this.id.orderId }).then(res => {
          this.highLight = res.data
        })
      }
    })
  },
  methods: {
    resetFields() {
      this.xml = ''
      this.$emit('onEvent', 'tab-click', false)
    },
    handleChange(tab) {
      this.$emit('onEvent', 'tab-click', tab.paneName === 'taskForm')
    },
    handleOptChange(e) {
      this.commonForm.approvalOpinion = e
    },
    submit(e, type) {
      return new Promise((resolve, reject) => {
        if (type === 2) {
          backOff({
            taskId: this.id.id,
            args: {
              targetNodeName: e.taskKey,
              approvalOpinion: this.commonForm.approvalOpinion || `退回【${e.taskName}】节点`
            }
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                message: res.msg || '操作成功',
                type: 'success'
              })
            }
            resolve(res)
          }).catch(e => {
            reject(e)
          })
          return
        }
        executeTask({
          taskId: this.id.id,
          args: {
            approvalType: type,
            approvalOpinion: this.commonForm.approvalOpinion
          }
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              message: res.msg || '操作成功',
              type: 'success'
            })
          }
          resolve(res)
        }).catch(e => {
          reject(e)
        })
      })
    }
  }
}
</script>
<style scoped>
.m-snaker-flow-designer {
  height:440px
}
.m-snaker-flow-designer >>> #LF-view {
  width: 100%;
  height: 100%;
  margin-left: 0;
}
.task-info-row {
  line-height: 44px;
}
</style>
